<template>
  <!-- 背景蒙层 -->
  <div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
    <!-- 弹窗主体 -->
    <div class="bg-white rounded-lg w-full max-w-md overflow-hidden shadow-xl">
      <!-- 顶部橙色背景 -->
      <div
        class="bg-gradient-to-b from-[#ff9b01] to-[#ff5001] pt-8 pb-12 relative"
      >
        <!-- 波纹背景装饰 -->
        <div
          class="absolute inset-0 opacity-20 bg-repeat"
          style="
            background-image: url(&quot;...&quot;);
          "
        ></div>

        <!-- 标题 -->
        <div class="relative text-center">
          <h2 class="text-2xl font-bold text-white">
            <span
              class="bg-clip-text text-transparent bg-gradient-to-r from-[#fff0b3] to-[#ffd700]"
            >
              {{ userStore?.user.wechatName || "小可爱" }}
            </span>
            <span class="block mt-2">恭喜您获得</span>
          </h2>

          <!-- 红包图标 -->
          <van-icon name="gift-o" class="text-[#ff3838] !text-6xl mt-4" />
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="px-6 py-8 text-center">
        <h3 class="text-xl font-medium text-gray-800">现金红包</h3>
        <div class="my-4">
          <span class="text-4xl font-bold text-[#e6a23c] font-mono">{{
            (
              (courseStore.courseData?.redPacket.redPacketPrice || 0) / 100
            ).toFixed(2)
          }}</span>
          <span class="text-gray-600 ml-1">元</span>
        </div>
        <p class="text-gray-500 text-sm">红包已入账您的微信零钱</p>
      </div>

      <!-- 底部操作 -->
      <div class="px-6 pb-6">
        <van-button
          round
          block
          color="#ff9b01"
          class="hover:opacity-90 transition-opacity"
          :loading="loading"
          loading-text="领取中..."
          @click="handleReceive"
        >
          开心收下
        </van-button>
        <p class="text-gray-400 text-xs mt-4">
          此处数据仅作展示，以实际领取为准
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { showLoadingToast, closeToast, showToast } from "vant";
import { useRedPacket, useCourseData } from "@/store/useLiveCourse";
import { useUserStore } from "@/store/useUserStore";
const redPacketStore = useRedPacket();
const courseStore = useCourseData();
const loading = ref(false);
const userStore = useUserStore();
console.log(userStore);
const handleReceive = async () => {
  loading.value = true;
  // showLoadingToast({
  //   message: "领取中...",
  //   forbidClick: true
  // });

  try {
    // 模拟 API 调用
    // await new Promise(resolve => setTimeout(resolve, 1500));
    redPacketStore.setIsVisible(false);
    closeToast();
    showToast({
      type: "success",
      message: "领取成功！"
    });
    // 这里可以添加关闭弹窗或其他后续操作
  } catch (error) {
    closeToast();
    showToast({
      type: "fail",
      message: "领取失败，请重试"
    });
  } finally {
    loading.value = false;
  }
};
</script>

<style>
/* 自定义渐变文字 */
.gradient-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* 覆盖Vant默认按钮样式 */
.van-button--round {
  @apply font-medium text-white;
}
</style>
